
<template>
  <div class="login" v-cloak>
    <div class="login-form-wrap">
      <div class="login-form-title">
            <div @click="active=1" :class="active==1?'add-border':''">学员登陆</div>
            <div @click="active=2" :class="active==2?'add-border':''">管理员登陆</div>
        </div>
      <div class="login-form">
        
        <el-form
          label-position="left"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="demo-ruleForm login-container"
        >
          
          <el-form-item prop="account" style="margin-top:12px">
            <el-input type="text" @keydown.enter.native="submitForm('ruleForm')" v-model="ruleForm.account" auto-complete="off" :placeholder="active==1?'请输入学员账号':'请输入管理员账号'"></el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-top:12px">
            <el-input
              type="password"
              v-model="ruleForm.password"
              auto-complete="off"
              show-password
              @keydown.enter.native="submitForm('ruleForm')"
              :placeholder="active==1?'请输入学员密码':'请输入管理员密码'"
            ></el-input>
          </el-form-item>

          <el-form-item style="width:100%;margin-top:34px;">
            <el-button
              type="primary"
              style="width:100%;"
              @click="submitForm('ruleForm')"
              :loading="logining"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: "login",
  data() {
    return {
      //定义loading默认为false
      logining: false,
      active:1,
      ruleForm: {
        account: "",
        password: ""
      },
      //rules前端验证
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  // 创建完毕状态(里面是操作)
  created() {},
  // 里面的函数只有调用才会执行
  methods: {
    //获取info列表
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true;
          //密码登录
          if(this.active == 1){
            //学员
            sessionStorage.setItem('active',JSON.stringify(this.active));
             var  tData = {
            action: "app/student/login",
            headers: this.abdpConfig.getApiJson(),
            data: {
              account: this.ruleForm.account,
              password: this.ruleForm.password
            }
          };
          }else{
            //管理员
             sessionStorage.setItem('active',JSON.stringify(this.active));
             var  tData = {
            action: "backstage/admin/login",
            headers: this.abdpConfig.getApiJson(),
            data: {
              account: this.ruleForm.account,
              password: this.ruleForm.password
            }
          };
          }
          this.abdpAjax.http(tData).then((rsp) => {
            console.log(rsp)
            if(rsp.data.code==200){
              //存取userid phone shopId
              this.abdpConfig.setAuther('role',rsp.data.data.name);
              this.abdpConfig.setToken(rsp.data.data.token)
              //页面跳转
              if(this.active == 1){
               this.$router.push({path: '/videoCourse'})

              }else{
                this.$router.push({path: '/dataStatistics'})

              }
              //提示
              this.$message({
                showClose: true,
                message: rsp.data.message,
                type: 'success'
              });
            }else{
              this.$message.error(rsp.data.message)
            }
            this.logining = false
          });
        } else {
          this.logining = false;
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url(../../assets/img/login-1.png)
    center center no-repeat;
  background-size: cover;
}
.login-form-wrap {
  margin-top: -5%;
  width: 600px;
  border-radius: 15px;
  box-sizing: border-box;
  background: rgba( 255,255,255, 0.4);
  box-shadow: 0px 3px 80px rgba(59, 170, 255, 0.11);
  border-radius: 10px;
  padding:2% 6%;
}
.login-form-title {
 line-height: 40px;
  
  font-size: 14px;
  font-weight: 400;
}
.login-form {
  margin-top: 10px;
  padding: 15px;
}
.login-form-btn {
  width: 100%;
}
.login-form-title{
  width: 100%;
  display: flex;
  color: #FFFFFF;
  font-size: 16px;
}
.add-border{
border-bottom: 2px solid #0075FF !important;
}
.login-form-title div{
  width: 50%;
  text-align: center;
  border-bottom: 2px solid #ddd;
  cursor: pointer;
}
</style>
<style>
.login .el-input__inner{
  border-radius: 20px;
      padding: 0 24px;
}
.login .el-button {
   border-radius: 20px;
}
.vjs-big-play-button {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
[v-cloak] {
	 display:none!important;
}
</style>